<template>
  <div class="common-card mt20">
    <dc-cell :title="type==1?'最赚钱员工':'最勤劳员工'" class="main-title"></dc-cell>
    <div class="pt40 pb40 podium bg-white mix1px">
      <dc-row type="flex" justify="space-around" align="bottom">
        <dc-col v-for="(item, index) in (type==1?itemList:serviceList)" :key="item.id" span="8" :order="index === 2?3:(index==0?2:1)">
          <span class="db head-img" :class="index==0?'big-avatar':''">
            <img class="avatar"
                 :src="item.empImage?item.empImage:'static/icon-user-role.png'" alt="">
            <em class="crown db" :style="'background-image: url(static/top' + (index+1) + '.png)'"></em>
         </span>
          <span class="db mt10">{{item.empName}}</span>
          <span v-if="index == 0" class="db mt10 block first">TOP 1</span>
          <span v-if="index == 1" class="db mt10 block second">TOP 2</span>
          <span v-if="index == 2" class="db mt10 block third">TOP 3</span>
          <span class="db mt10" v-if="type==1">￥{{item.empAmount}}</span>
          <span class="db mt10" v-if="type==2">{{item.empServiceTables}}桌</span>
        </dc-col>
      </dc-row>
    </div>
    <router-link class="more bg-white" :to="{path: '/bestEmplist', query: {type: this.type}}">查看更多</router-link>
  </div>
</template>

<script>
  import {col, row} from '@/common/Flex';
  import cell from '@/common/plugins/cell';
  import rankApi from '@/common/api/rankList';

  export default {
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    props: {
      date: [Object, String],
      type: Number
    },
    data () {
      return {
        itemList: [{empName: '暂无', empAmount: 0}, {empName: '暂无', empAmount: 0}, {empName: '暂无', empAmount: 0}],
        serviceList: [{empName: '暂无', empServiceTables: 0}, {empName: '暂无', empServiceTables: 0}, {empName: '暂无', empServiceTables: 0}]
      };
    },
    watch: {
      date: {
        handler: function (value) { //深度监听，监听对象的变化
          this.buildChart();
        },
        deep: true
      }
    },
    methods: {
      buildChart () {
        this.dataInit();
        let data = {
          timeFlag: this.date.type,
          beginTime: this.date.startTime,
          endTime: this.date.endTime,
          page: 1,
          limit: 3
        };
        if (this.type === 1) {
          this._getEarnRanking(data);
        }
        if (this.type === 2) {
          this._getServiceRanking(data);
        }
      },
      //数据初始化
      dataInit () {
        this.itemList = [{empName: '暂无', empAmount: 0}, {empName: '暂无', empAmount: 0}, {empName: '暂无', empAmount: 0}];
        this.serviceList = [{empName: '暂无', empServiceTables: 0}, {empName: '暂无', empServiceTables: 0}, {empName: '暂无', empServiceTables: 0}];
      },
      _getEarnRanking (data) {  //获取最赚钱员工
        rankApi.getEmpEarnRanking(data)
          .then(res => {
            if (res && res.length > 0) {
              res.forEach((item, index) => {
                this.itemList.splice(index, 1, item);
              });
            }
          });
      },
      _getServiceRanking (data) {  //获取最勤劳员工
        rankApi.getEmpServiceRanking(data)
          .then(res => {
            if (res && res.length > 0) {
              res.forEach((item, index) => {
                this.serviceList.splice(index, 1, item);
              });
            }
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .podium {
    font-size: px2rem(28px);
    .db {
      display: block;
    }
    .mt10 {
      margin-top: px2rem(10px);
    }
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .head-img {
      width: px2rem(100px);
      height: px2rem(100px);
      margin: 0 auto;
      position: relative;
    }
    .crown {
      width: 30px;
      height: 30px;
      background-size: 100%;
      position: absolute;
      top: -12px;
      right: -16px;
    }
    .big-avatar {
      width: px2rem(140px);
      height: px2rem(140px);
      .crown {
        width: 40px;
        height: 40px;
        top: -16px;
        right: -20px;
      }
    }
    .block {
      color: #fff;
      margin: px2rem(10px) px2rem(40px);
      font-size: px2rem(26px);
    }
    .first {
      height: px2rem(80px);
      line-height: px2rem(80px);
      background-color: #F6D331;
    }
    .second {
      height: px2rem(60px);
      line-height: px2rem(60px);
      background-color: #B8C9DD;
    }
    .third {
      height: px2rem(40px);
      line-height: px2rem(40px);
      background-color: #E9995C;
    }
  }

  .more {
    text-align: center;
    line-height: px2rem(90px);
    font-size: px2rem(30px);
    color: #999;
    display: block;
  }

  .mb40 {
    margin-bottom: px2rem(40px);
  }
</style>
